16 tháng 8, 2025Tiếng Việt

Hướng dẫn toàn diện về Solid Router, router phía client chính thức cho SolidJS, bao gồm cài đặt, cách sử dụng, tính năng nâng cao và các phương pháp tốt nhất để xây dựng ứng dụng trang đơn liền mạch.

Solid Router: Làm chủ Điều hướng Phía Client trong SolidJS

SolidJS, nổi tiếng với hiệu suất vượt trội và sự đơn giản, cung cấp một nền tảng tuyệt vời để xây dựng các ứng dụng web hiện đại. Để tạo ra trải nghiệm người dùng thực sự hấp dẫn và thân thiện, một router phía client mạnh mẽ là điều cần thiết. Đây là lúc Solid Router xuất hiện, router chính thức và được khuyên dùng cho SolidJS, được thiết kế để tích hợp liền mạch với các nguyên tắc phản ứng (reactive) của framework.

Hướng dẫn toàn diện này sẽ đi sâu vào thế giới của Solid Router, bao gồm mọi thứ từ thiết lập cơ bản đến các kỹ thuật nâng cao để xây dựng các ứng dụng trang đơn (SPA) phức tạp và năng động. Cho dù bạn là một nhà phát triển SolidJS dày dạn kinh nghiệm hay chỉ mới bắt đầu, bài viết này sẽ trang bị cho bạn kiến thức và kỹ năng để làm chủ việc điều hướng phía client.

Solid Router là gì?

Solid Router là một router phía client nhẹ và hiệu suất cao được thiết kế đặc biệt cho SolidJS. Nó tận dụng tính phản ứng của SolidJS để cập nhật giao diện người dùng một cách hiệu quả dựa trên những thay đổi trong URL của trình duyệt. Không giống như các router truyền thống dựa vào việc so sánh DOM ảo, Solid Router thao tác trực tiếp với DOM, mang lại hiệu suất nhanh hơn và dễ dự đoán hơn.

Các tính năng chính của Solid Router bao gồm:

Định tuyến khai báo: Xác định các route của bạn bằng cách sử dụng một API dựa trên JSX đơn giản và trực quan.
Định tuyến động: Dễ dàng xử lý các route với tham số, cho phép bạn tạo ra các ứng dụng động và dựa trên dữ liệu.
Route lồng nhau: Tổ chức ứng dụng của bạn thành các phần logic với các route lồng nhau.
Thành phần Link: Điều hướng liền mạch giữa các route bằng cách sử dụng thành phần <A>, tự động xử lý cập nhật URL và tạo kiểu cho liên kết đang hoạt động.
Tải dữ liệu: Tải dữ liệu bất đồng bộ trước khi hiển thị một route, đảm bảo trải nghiệm người dùng mượt mà.
Hiệu ứng chuyển tiếp: Tạo các hiệu ứng chuyển tiếp hấp dẫn trực quan giữa các route để nâng cao trải nghiệm người dùng.
Xử lý lỗi: Xử lý lỗi một cách duyên dáng và hiển thị các trang lỗi tùy chỉnh.
Tích hợp History API: Tích hợp liền mạch với History API của trình duyệt, cho phép người dùng điều hướng bằng các nút quay lại và tiến tới.

Bắt đầu với Solid Router

Cài đặt

Để cài đặt Solid Router, hãy sử dụng trình quản lý gói ưa thích của bạn:

            npm install @solidjs/router
yarn add @solidjs/router
pnpm add @solidjs/router

Thiết lập cơ bản

Cốt lõi của Solid Router xoay quanh các thành phần <Router> và <Route>. Thành phần <Router> đóng vai trò là gốc của hệ thống định tuyến ứng dụng của bạn, trong khi các thành phần <Route> xác định ánh xạ giữa URL và các thành phần.

Đây là một ví dụ cơ bản:

            import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <Route path="/"> <Home/> </Route>
      <Route path="/about"> <About/> </Route>
    </Router>
  );
}

export default App;

Trong ví dụ này, thành phần <Router> bao bọc toàn bộ ứng dụng. Các thành phần <Route> xác định hai route: một cho đường dẫn gốc ("/") và một cho đường dẫn "/about". Khi người dùng điều hướng đến một trong hai đường dẫn này, thành phần tương ứng (Home hoặc About) sẽ được hiển thị.

Thành phần `<A>`

Để điều hướng giữa các route, hãy sử dụng thành phần <A> do Solid Router cung cấp. Thành phần này tương tự như thẻ <a> HTML thông thường, nhưng nó tự động xử lý cập nhật URL và ngăn chặn việc tải lại toàn bộ trang.

            import { A } from '@solidjs/router';

function Navigation() {
  return (
    <nav>
      <A href="/">Home</A>
      <A href="/about">About</A>
    </nav>
  );
}

export default Navigation;

Khi người dùng nhấp vào một trong những liên kết này, Solid Router sẽ cập nhật URL của trình duyệt và hiển thị thành phần tương ứng mà không kích hoạt việc tải lại toàn bộ trang.

Các kỹ thuật định tuyến nâng cao

Định tuyến động với Tham số Route

Solid Router hỗ trợ định tuyến động, cho phép bạn tạo các route với tham số. Điều này hữu ích để hiển thị nội dung dựa trên một ID hoặc slug cụ thể.

            import { Router, Route } from '@solidjs/router';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Router>
      <Route path="/users/:id"> <UserProfile/> </Route>
    </Router>
  );
}

export default App;

Trong ví dụ này, phân đoạn :id trong đường dẫn là một tham số route. Để truy cập giá trị của tham số id bên trong thành phần UserProfile, bạn có thể sử dụng hook useParams:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;

Hook useParams trả về một đối tượng chứa các tham số route. Trong trường hợp này, params.id sẽ chứa giá trị của tham số id từ URL. Sau đó, hook createResource được sử dụng để tìm nạp dữ liệu người dùng dựa trên ID.

Ví dụ quốc tế: Hãy tưởng tượng một nền tảng thương mại điện tử toàn cầu. Bạn có thể sử dụng định tuyến động để hiển thị chi tiết sản phẩm dựa trên ID sản phẩm: /products/:productId. Điều này cho phép bạn dễ dàng tạo các URL duy nhất cho mỗi sản phẩm, giúp người dùng dễ dàng chia sẻ và đánh dấu các mục cụ thể, bất kể vị trí của họ.

Route lồng nhau

Các route lồng nhau cho phép bạn tổ chức ứng dụng của mình thành các phần logic. Điều này đặc biệt hữu ích cho các ứng dụng phức tạp có nhiều cấp độ điều hướng.

            import { Router, Route } from '@solidjs/router';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Settings from './components/Settings';

function App() {
  return (
    <Router>
      <Route path="/dashboard">
        <Dashboard/>
        <Route path="/profile"> <Profile/> </Route>
        <Route path="/settings"> <Settings/> </Route>
      </Route>
    </Router>
  );
}

export default App;

Trong ví dụ này, thành phần <Dashboard> hoạt động như một vùng chứa cho các thành phần <Profile> và <Settings>. Các route <Profile> và <Settings> được lồng bên trong route <Dashboard>, có nghĩa là chúng sẽ chỉ được hiển thị khi người dùng ở trên đường dẫn "/dashboard".

Để hiển thị các route lồng nhau bên trong thành phần <Dashboard>, bạn cần sử dụng thành phần <Outlet>:

            import { Outlet } from '@solidjs/router';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <A href="/dashboard/profile">Profile</A>
        <A href="/dashboard/settings">Settings</A>
      </nav>
      <Outlet/>
    </div>
  );
}

export default Dashboard;

Thành phần <Outlet> hoạt động như một trình giữ chỗ nơi các route lồng nhau sẽ được hiển thị. Khi người dùng điều hướng đến "/dashboard/profile", thành phần <Profile> sẽ được hiển thị bên trong thành phần <Outlet>. Tương tự, khi người dùng điều hướng đến "/dashboard/settings", thành phần <Settings> sẽ được hiển thị bên trong thành phần <Outlet>.

Tải dữ liệu với `createResource`

Tải dữ liệu một cách bất đồng bộ trước khi hiển thị một route là rất quan trọng để cung cấp trải nghiệm người dùng mượt mà. Solid Router tích hợp liền mạch với hook createResource của SolidJS, giúp việc tải dữ liệu trở nên dễ dàng.

Chúng ta đã thấy một ví dụ về điều này trong thành phần UserProfile trước đó, nhưng đây là nó một lần nữa để làm rõ:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;

Hook createResource nhận hai đối số: một signal kích hoạt việc tải dữ liệu và một hàm tìm nạp dữ liệu. Trong trường hợp này, signal là () => params.id, có nghĩa là dữ liệu sẽ được tìm nạp bất cứ khi nào tham số id thay đổi. Hàm fetchUser tìm nạp dữ liệu người dùng từ một API dựa trên ID.

Hook createResource trả về một mảng chứa resource (dữ liệu được tìm nạp) và một hàm để tìm nạp lại dữ liệu. Resource là một signal giữ dữ liệu. Bạn có thể truy cập dữ liệu bằng cách gọi signal (user()). Nếu dữ liệu vẫn đang được tải, signal sẽ trả về undefined. Điều này cho phép bạn hiển thị một chỉ báo tải trong khi dữ liệu đang được tìm nạp.

Hiệu ứng chuyển tiếp

Thêm hiệu ứng chuyển tiếp giữa các route có thể nâng cao đáng kể trải nghiệm người dùng. Mặc dù Solid Router không có hỗ trợ chuyển tiếp tích hợp sẵn, nó tích hợp tốt với các thư viện như solid-transition-group để đạt được các hiệu ứng chuyển tiếp mượt mà và hấp dẫn về mặt hình ảnh.

Đầu tiên, cài đặt gói solid-transition-group:

            npm install solid-transition-group
yarn add solid-transition-group
pnpm add solid-transition-group

Sau đó, bao bọc các route của bạn bằng thành phần <TransitionGroup>:

            import { Router, Route } from '@solidjs/router';
import { TransitionGroup, Transition } from 'solid-transition-group';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <TransitionGroup>
        <Route path="/">
          <Transition name="fade" duration={300}>
            <Home/>
          </Transition>
        </Route>
        <Route path="/about">
          <Transition name="fade" duration={300}>
            <About/>
          </Transition>
        </Route>
      </TransitionGroup>
    </Router>
  );
}

export default App;

Trong ví dụ này, mỗi route được bao bọc bởi một thành phần <Transition>. Thuộc tính name chỉ định tiền tố lớp CSS cho hiệu ứng chuyển tiếp, và thuộc tính duration chỉ định thời gian của hiệu ứng chuyển tiếp tính bằng mili giây.

Bạn sẽ cần xác định các lớp CSS tương ứng cho hiệu ứng chuyển tiếp trong stylesheet của mình:

            .fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

Mã CSS này xác định một hiệu ứng chuyển tiếp mờ dần/hiện dần đơn giản. Khi một route được nhập, các lớp .fade-enter và .fade-enter-active được áp dụng, làm cho thành phần hiện dần lên. Khi một route được thoát, các lớp .fade-exit và .fade-exit-active được áp dụng, làm cho thành phần mờ dần đi.

Xử lý lỗi

Xử lý lỗi một cách duyên dáng là điều cần thiết để cung cấp trải nghiệm người dùng tốt. Solid Router không có xử lý lỗi tích hợp sẵn, nhưng bạn có thể dễ dàng triển khai nó bằng cách sử dụng một error boundary toàn cục hoặc một trình xử lý lỗi cụ thể cho từng route.

Đây là một ví dụ về một error boundary toàn cục:

            import { createSignal, Suspense, ErrorBoundary } from 'solid-js';
import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  const [error, setError] = createSignal(null);

  return (
    <ErrorBoundary fallback={<p>Something went wrong: {error()?.message}</p>}>
      <Suspense fallback={<p>Loading...</p>}>
        <Router>
          <Route path="/"> <Home/> </Route>
          <Route path="/about"> <About/> </Route>
        </Router>
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;

Thành phần <ErrorBoundary> bắt bất kỳ lỗi nào xảy ra trong các thành phần con của nó. Thuộc tính fallback chỉ định thành phần sẽ được hiển thị khi có lỗi xảy ra. Trong trường hợp này, nó hiển thị một đoạn văn với thông báo lỗi.

Thành phần <Suspense> xử lý các promise đang chờ xử lý, thường được sử dụng với các thành phần bất đồng bộ hoặc tải dữ liệu. Nó hiển thị thuộc tính `fallback` cho đến khi các promise được giải quyết.

Để kích hoạt một lỗi, bạn có thể ném một ngoại lệ bên trong một thành phần:

            function Home() {
  throw new Error('Failed to load home page');

  return <h1>Home</h1>;
}

export default Home;

Khi mã này được thực thi, thành phần <ErrorBoundary> sẽ bắt lỗi và hiển thị thành phần fallback.

Lưu ý về quốc tế hóa: Khi hiển thị thông báo lỗi, hãy xem xét việc quốc tế hóa (i18n). Sử dụng một thư viện dịch để cung cấp thông báo lỗi bằng ngôn ngữ ưa thích của người dùng. Ví dụ, nếu một người dùng ở Nhật Bản gặp lỗi, họ nên thấy thông báo lỗi bằng tiếng Nhật, chứ không phải tiếng Anh.

Các phương pháp tốt nhất khi sử dụng Solid Router

Giữ các route của bạn được tổ chức: Sử dụng các route lồng nhau để tổ chức ứng dụng của bạn thành các phần logic. Điều này sẽ giúp việc bảo trì và điều hướng mã của bạn dễ dàng hơn.
Sử dụng tham số route cho nội dung động: Sử dụng tham số route để tạo URL động cho việc hiển thị nội dung dựa trên một ID hoặc slug cụ thể.
Tải dữ liệu bất đồng bộ: Tải dữ liệu bất đồng bộ trước khi hiển thị một route để cung cấp trải nghiệm người dùng mượt mà.
Thêm hiệu ứng chuyển tiếp giữa các route: Sử dụng hiệu ứng chuyển tiếp để nâng cao trải nghiệm người dùng và làm cho ứng dụng của bạn cảm thấy bóng bẩy hơn.
Xử lý lỗi một cách duyên dáng: Triển khai xử lý lỗi để bắt và hiển thị lỗi một cách thân thiện với người dùng.
Sử dụng tên route mô tả: Chọn tên route phản ánh chính xác nội dung của route đó. Điều này sẽ giúp dễ hiểu hơn về cấu trúc ứng dụng của bạn.
Kiểm thử các route của bạn: Viết các bài kiểm thử đơn vị để đảm bảo rằng các route của bạn hoạt động chính xác. Điều này sẽ giúp bạn phát hiện lỗi sớm và ngăn ngừa sự hồi quy.

Kết luận

Solid Router là một router phía client mạnh mẽ và linh hoạt, tích hợp liền mạch với SolidJS. Bằng cách làm chủ các tính năng của nó và tuân theo các phương pháp tốt nhất, bạn có thể xây dựng các ứng dụng trang đơn phức tạp và năng động, cung cấp trải nghiệm người dùng mượt mà và hấp dẫn. Từ thiết lập cơ bản đến các kỹ thuật nâng cao như định tuyến động, tải dữ liệu và hiệu ứng chuyển tiếp, hướng dẫn này đã cung cấp cho bạn kiến thức và kỹ năng để tự tin điều hướng trong thế giới điều hướng phía client trong SolidJS. Hãy tận dụng sức mạnh của Solid Router và khai phá toàn bộ tiềm năng của các ứng dụng SolidJS của bạn!

Hãy nhớ tham khảo tài liệu chính thức của Solid Router để có thông tin và ví dụ cập nhật nhất: [Liên kết đến Tài liệu Solid Router - Placeholder]

Hãy tiếp tục xây dựng những điều tuyệt vời với SolidJS!